import {
  Form,
  TextField,
  NumberField,
  Password,
  EmailField,
  UrlField,
  DatePicker,
  Select,
  SelectBox,
  Switch,
  Lov,
  Button,
  DataSet,
} from 'choerodon-ui/pro';
import React, { useMemo } from 'react';
import { ButtonType } from 'choerodon-ui/pro/lib/button/enum';
import { ShowHelp } from 'choerodon-ui/pro/lib/field/enum';
import formDs from './formDataSet';

const { Option } = Select;

const changeField = async (formDataSet: DataSet) => {
  if (formDataSet.current) {
    formDataSet.current.getField('code')!.set('textField', 'description');// !表示用户来保证 数据存在 所以使用form 和dataSet绑定需要加 autoCreate,这里使用.?有问题因为值同样不能为undefine
  };
};

const FormDataset: React.FC = (): React.ReactElement => {
  const formDataSet = useMemo(() => new DataSet(formDs()), []);
  return (
    <>
      <Form dataSet={formDataSet} style={{ width: '4.5rem' }}>
        <TextField name="phone" />
        <Password name="password" />
        <Password name="confirmPassword" />
        <NumberField name="age" addonAfter="周岁" showHelp={ShowHelp.tooltip} />
        <SelectBox name="sex">
          <Option value="M">男</Option>
          <Option value="F">女</Option>
        </SelectBox>
        <Select name="language">
          <Option value="zh-cn">简体中文</Option>
          <Option value="en-us">英语(美国)</Option>
          <Option value="ja-jp">日本語</Option>
        </Select>
        <EmailField name="email" />
        <UrlField name="homepage" />
        <DatePicker name="birth" />
        <Lov name="code" />
        <Switch name="frozen" />
        <div>
          <Button type={ButtonType.submit}>注册</Button>
          <Button type={ButtonType.reset} style={{ marginLeft: 8 }}>
            重置
          </Button>
          <Button onClick={() => changeField(formDataSet)} style={{ marginLeft: 8 }}>
            设置代码描述的textField
          </Button>
        </div>
      </Form>
    </>
  );
};

export default FormDataset;